<template>
	<view class="orderList">
		<u-tabs class="fixtop" :list="tablist" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<view style="padding-top: 50rpx;">
		<view v-for="(x,i) in list" :key="i">
			<u-card :title="x.plateNo" :sub-title="x.contactName" :thumb="thumb">
				<template v-slot:body>
					<view>
						<view class="u-body-item" v-if="x.createTime"> 预约时间：{{ x.createTime }}</view>
						<view class="u-body-item" v-if="x.pickTime"> 预约取车时间：{{ x.pickTime }}</view>
						<view class="u-body-item" v-if="x.deliveryTime"> 预约送车时间：{{ x.deliveryTime }}</view>
						<view class="u-body-item" v-if="x.pickAddress"> 取车地址：{{ x.pickAddress }}</view>
						<view class="u-body-item" v-if="x.deliveryAddress"> 交车地址：{{ x.deliveryAddress }}</view>
						<view class="u-body-item">预约类型：{{ x.orderType == 1?'洗车':'维修' }}</view>
						<uni-row  :gutter="20">
						<!-- 	<uni-col :span="8">
								<view v-if="isAdmin == 2  && x.status == 0"><u-button type="primary"
										@click="confirm(x,1)">确认预约</u-button></view>
							</uni-col>
							<uni-col :span="8">
								<view v-if="isAdmin == 2  && x.status == 1"><u-button type="primary"
										@click="confirm(x,2)">维修完成</u-button></view>
							</uni-col> -->
							<uni-col :span="8">
									<u-button v-if="x.status == 0 && x.openid== this.openid" type="error"
										@click="confirm(x,99)" :plain="true" size="mini" >取消预约</u-button>
							</uni-col>
							<uni-col :span="8">
								<u-button size="mini" :plain="true"  type="primary" @click="daohang">去门店</u-button>
							</uni-col>
							<uni-col :span="8">
								<u-button size="mini" :plain="true" @click="lookInfo(x)">详情</u-button>
							</uni-col>
						</uni-row>
					</view>
				</template>
			</u-card>
		</view>
        <view v-if="list.length==0" class="empty" >
			<u-empty  mode="order"></u-empty>
		</view>
		</view>
	</view>
	
</template>

<script>
	import {orderCancel,storeInfo} from '@/utils/config.js'
	export default {
		name: "",
		data() {
			return {
				current: 0,
				tablist: [{
						name: '已提交'
					},
					{
						name: '维修中'
					},{
						name: '已完成'
					}, {
						name: '已取消'
					}
				],
				list: [{
					title: '',
					subTitle: "xxx",
					thumb: 1
				}],
				openid: uni.getStorageSync('openid'),
				isAdmin: uni.getStorageSync('isAdmin'),
				source:"weixin"
			}
		},
		onLoad(options) {
			if (options.openid) {
				this.openid = options.openid;
			}
			this.init();
		},
		onShow() {
			this.current = 0;
			this.init();
		},
		methods: {
			daohang(){
				uni.openLocation({
					...storeInfo,
					success: function(res) {
						console.log(res)
					},
					fail:(res)=>{
						console.log(res)
					}
				})	
			},
			lookInfo(row){
				uni.navigateTo({
					url: "/pages/reserve/reserveInfo?id="+row.id,
				})
			},
			change(index){
				this.current = index;
				this.init();
			},
			init() {
				uni.request({
					url: "reserve/list",
					method: "POST",
					data: {
						openid:this.openid,
						pageNum: 1,
						pageSize: 20,
						status:this.current==3?99:this.current,
						isAdmin:1
					},
					success: (res) => {
						this.list = res.data.list.map(e => {
							return {
								...e,
								plateNo: e.plateNo,
								contactName: e.contactName
							}
						});

					}
				})
			},
			confirm(row, status) {
				if(status == 99){
					uni.request({
						url:"reserve/cancel",
						method: "POST",
						data: {
							...row,
							status,
							templateData:orderCancel(row)
						},
						success: (res) => {
							this.init();
						}
					})
				}
				
			}
		}
	}
</script>

<style scoped lang="less">
	.fixtop{
		position: fixed;
		top:0;
		width: 100%;
	}
	.empty{
		padding: 450rpx 0;
		padding-bottom: 600rpx;
		text-align: center;
		font-size: 50rpx;
		height: 800rpx;
		color: #666;
	}
	.orderList {
		padding: 20rpx 0;
		background-image: linear-gradient(90deg, #F1EEF5, #EBF1F6);
	}

	.u-card-wrap {
		background-color: #fff;
		padding: 1px;
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}

	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}
</style>